<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.menu.extend.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.tree.extend.js"></script>
        <script type="text/javascript" src="../../extend/jquery.json-2.4.min.js"></script>
        <!--<script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>-->
        <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
        <script type="text/javascript">
            SyntaxHighlighter.config.tagName = "textarea";
            SyntaxHighlighter.all();
        </script>
        <script type="text/javascript">
            $(function(){
                $('#tt').tree({
                    data: [{
                        id: '1',
                        title: 'My Documents',
                        submenu: [{
                            id: '11',
                            title: 'Photos',
                            f1: 'aaaa',
                            f2: 'bbbb'
                        },{
                            id: '12',
                            title: 'Wife',
                            f1: 'wwwww',
                            f2: 'cccccc'
                        },{
                            id: '23',
                            title: 'Company'
                        }]
                    },{
                        id: '2',
                        title: 'Program Files'
                    },{
                        id: '3',
                        title: 'Actions'
                    }],
                    customAttr:{
                        textField: 'title',
                        childrenField: 'submenu',
                        attributes: ['f1', 'f2']
                    },
                    onClick: function(node){
                        alert($.toJSON(node));
                    }
                });
            });
        </script>
    </head>
    <body>
    <div class="easyui-tabs" data-options="fit: true, plain: true">
        <div data-options="title: 'Demo'">
            <h3>类标准JSON格式转换</h3>
            <p>类似tree数据加载格式，但属性字段名不同。</p>
            <ul id="tt"></ul>
        </div>
        <div data-options="title: 'Code'" style="font-size: 14px;">
            <p>javascript:</p>
            <textarea class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,28,29,30]">
                    $(function(){
                        $('#tt').tree({
                            data: [{
                                id: '1',
                                title: 'My Documents',
                                submenu: [{
                                    id: '11',
                                    title: 'Photos',
                                    f1: 'aaaa',
                                    f2: 'bbbb'
                                },{
                                    id: '12',
                                    title: 'Wife',
                                    f1: 'wwwww',
                                    f2: 'cccccc'
                                },{
                                    id: '23',
                                    title: 'Company'
                                }]
                            },{
                                id: '2',
                                title: 'Program Files'
                            },{
                                id: '3',
                                title: 'Actions'
                            }],
                            customAttr:{
                                textField: 'title',
                                childrenField: 'submenu',
                                attributes: ['f1', 'f2']
                            },
                            onClick: function(node){
                                alert($.toJSON(node));
                            }
                        });
                    });
            </textarea>

            <p>html:</p>
            <textarea class="brush: html;">
                <body>
                <h3>简单JSON格式</h3>
                <p>类似tree数据加载格式，但属性字段名不同。</p>
                <ul id="tt"></ul>
                </body>
            </textarea>
        </div>
    </div>
    </body>
</html>